<template>
  <div class="home">
    <div class="home_left">
      <div class="hom_header">
        <div class="hot">
          <el-row>
            <el-col :span="7" v-for="item in popularRecommendations" :key="item.id">
              <dl>
                <dd><a href="#" class="default">{{ item.abstractTitle }}</a></dd>
              </dl>
            </el-col>
          </el-row>
        </div>
      </div>
      <div class="cate_all">
        <div class="list" v-for="(item,index) in goodList" :key="index">
          <img class="list_left" :src="item.mainUrl" alt=""/>
          <div class="list_right">
            <div class="list_title">
              <span>{{ item.classification.name }}</span>
              <span>{{ item.hotTitle }}</span>
              <span>&nbsp;价值{{ item.valuePrice }}元</span>
            </div>
            <div class="list_icon">
              <span><i class="el-icon-share"></i>{{ item.createDate }}</span>
              <span><i class="el-icon-user-solid"></i>admin</span>
              <span><i class="el-icon-user-solid"></i>阅读({{ item.readingVolume }})</span>
              <span><i class="el-icon-user-solid"></i>收藏({{ item.collectionVolume }})</span>
            </div>
            <div class="list_con">
              {{ item.textArea }}
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="home_right">
      <el-card class="box-card">
        <template #header>
          <span>资源搜索</span>
        </template>
        <div class="text item">
          <el-input
              placeholder="请输入搜索内容"
              v-model="goodsParams.content"
              clearable>
          </el-input>
          <el-button type="primary" size="medium" style="width: 100%;height: 45px;margin-top: 20px"
                     @click="searchGoods">搜索
          </el-button>
        </div>
      </el-card>
      <el-card class="box-card cate-card">
        <template #header>
          <span>内容分类</span>
        </template>
        <div class="text item  cate-item">
          <dl v-for="item in certificationList" :key="item.parent">
            <dt><a href="#" :key ="item.parent">{{ item.parentName }}</a></dt>
            <dd v-for="chirenItem in item.list" :key="chirenItem.id"><a href="#">{{ chirenItem.name }} </a></dd>
          </dl>
        </div>
      </el-card>

    </div>

  </div>
</template>

<script>
import {hotList, classifCationParentList} from "@/api/web/classifcation";
import {goodsList, popularRecommendation} from "@/api/web/goods";


export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "Home",
  components: {},
  data() {
    return {
      fullHeight: '',
      popularRecommendations: [],
      certificationList: [],
      goodList: [],
      goodsParams: {
        content: null
      },
    }
  },
  created() {
    this.goodsParams = {};
    this.cateifcationList();
    this.goodsList();
    this.popularRecommendationList();
  },
  mounted() {

  },
  methods: {
    searchGoods() {
      this.goodsList();
    },
    // 热门分类文章
    popularRecommendationList() {
      popularRecommendation().then(response => {
        console.log(response.data.data)
        this.popularRecommendations = response.data.data;
      });
    },

    // 分类
    cateifcationList() {
      classifCationParentList().then(response => {
        console.log(response.data.data)
        this.certificationList = response.data.data;
      });
    },
    // 摘要文章
    goodsList() {
      goodsList(this.goodsParams).then(response => {
        console.log(response.data.data)
        this.goodList = response.data.data;
      });
    }
  }
}
</script>

<style lang="scss" scoped>


a {
  text-decoration: none;
  color: #000;
}


li {
  list-style: none;
}


.home {
  display: flex;

  .home_left {
    width: 65%;
  }

  .home_right {
    width: 35%;
    height: 230px;
    margin-left: 25px;

  }


}

.cate_all {
  background-color: #fff;
  margin-top: 15px;

  .list {
    display: flex;
    border: 1px solid #eaeaea;
    padding: 20px;
    margin-bottom: -1px;
  }

  .list_left {
    width: 220px;
    height: 150px;
  }

  .list_title {
    font-size: 16px;
    font-weight: bolder;
    line-height: 25px;
    letter-spacing: 0.5px;

    span:nth-child(1) {
      color: #f8f7f7;
      background-color: #45BCF9;
      font-size: 12px;
      padding: 3px 6px;
      margin-right: 10px;
      position: relative;
    }

    span:nth-child(1):before {
      display: inline-block;
      position: absolute;
      content: '';
      right: -5px;
      top: 0;
      border-top: 10px solid transparent;
      border-left: 15px solid #45BCF9;
      border-bottom: 10px solid transparent;
    }

    span:nth-child(3) {
      color: #fb0505;
    }
  }

  .list_title:hover {
    cursor: pointer;

    span:nth-child(2), span:nth-child(3) {
      color: #4194ec;
    }
  }

  .list_icon {
    padding-bottom: 5px;

    span:nth-child(1) {
      padding: 0;
    }

    span {
      padding-left: 20px;
      color: #999;
      font-size: 12px;
      text-align: left;
      margin-bottom: 10px;
    }
  }

  .list_con {
    font-size: 12px;
    color: #999;
    word-wrap: break-word;
    line-height: 20px;
    margin-bottom: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .list_right {
    padding-left: 20px;
  }
}


.excerpt {
  border: 1px solid #eaeaea;
  padding: 20px 20px 20px 255px;
  overflow: hidden;
  background-color: #fff;
  margin-bottom: -1px;
}

.hom_header {
  background-color: #fff;
}

.cate_all a img {
  vertical-align: middle;
  border-style: none;
  width: 340px;
}


.hot {
  overflow: hidden;
  height: auto;
}


.hot dd a {
  color: #666;
  font-size: 14px;
  float: left;
}

.hot a:hover {
  color: #fc8080;
}

.cate-card {
  margin-top: 15px;
}

.cation-list dd {
  border-bottom: 1px dotted #e0e0e0;
  margin-left: 64px;
  overflow: hidden;
}

.cation-list dd a {
  color: #8d8d91;
  font-size: 14px;
  line-height: 14px;
  height: 14px;
  float: left;
  border-right: 1px solid #e0e0e0;
  padding: 0 18px;
  margin: 17px 0;
}

a:hover {
  color: #fc8080;
}

.cation-list dd a:last-child {
  border-right: 0 none;
}

.cation-list:last-of-type dd {
  border-bottom: 0 none;
}

.cate-item {
  padding-left: 10px;
  line-height: 45px;
}

.cate-item dl dd {
  display: inline;
  list-style:disc;

}

.cate-item dl {
  margin-top: 10px;
}
</style>
